//客户端

//获取搜索按钮和输入框
let searchBtn = document.querySelector('.inputbox button')
let inputeEle = document.querySelector('.inputbox input')
//点击搜索按钮，发起ajax请求，传参数给服务器端，服务器端返回搜索的结果
searchBtn.onclick = ()=>{
    axios.get('/user/search' , { params:{ searchkey:inputeEle.value} }).then((res)=>{
        render(res.data.list) 
        console.log(res.data);
     })
}

//渲染列表
function render(data) {
    let str = ''
    str = data.map((item, index) => {
        return `
        <tr>
            <td>${item.email}</td>
            <td>${item.name}</td>
            <td>${item.phone}</td>
            <td>${item.ingroup}</td>
            <td>${item.isadmin ? '是' : '否'}</td>
            <td> <span class="statusok ${item.status?'':'error'}">${item.status ? '正常' : '异常'}</span> </td>
            <td> <span class="iconfont icon-bianji"></span> <span class="iconfont icon-shanchu"></span> </td>
        </tr>
        `
    }).join('')
    if( str == '' ){
        str = `
        <tr>
        <td style = "text-align:center;color:red">
        未查询到数据!
        </td>
        </tr>`
    }
    document.querySelector('tbody').innerHTML = str

}

//axios是从axios.min.js文件中暴露的 用来发送ajax请求的一个对象 //res是服务器端返回的数据
//{ params:{} } 携带参数的语法
axios.get('/user/list', { params: { page: 1, count: 2 } }).then((res) => {
    //调用render方法，传入后端返回的数据，完成渲染列表
    render(res.data.list)
    console.log(res.data);
    
})

